<!DOCTYPE html>
<html><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="alternate" type="application/rss+xml" href="/vue/index.xml" title="h-book" />
    <link rel="canonical" href="/vue/">

    <title>
        
        Vue | h-book
        
    </title>

    
    <link href="/css/fontawesome.min.css" rel="stylesheet">

    
    <link rel="stylesheet" href="/css/ace.min.css">

    

    

</head>
<body><nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow sticky-top" id="navbarMain">
    <div class="container">
        <div>
            <a class="navbar-brand" href="/">
                
                h-book
            </a>
        </div>
    </div>
</nav>
<div class="container-fluid">
            <div class="row">

                <div class="docs-sidenav order-0 col-12 col-md-3 col-lg-2 col-xl-2 position-sticky border-right"><nav class="navbar navbar-expand-md navbar-light pl-0">
    <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#sidenav-left-collapse" aria-controls="sidenav-left-collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

     <div class="collapse navbar-collapse align-items-start flex-column" id="sidenav-left-collapse">
            <form class="form-inline my-2 my-lg-0 searchbox">
                <input class="form-control mr-sm-2 w-100" data-search-input id="search-by" type="text" placeholder="Search">
            </form>

        

         <ul class="navbar-nav flex-column pt-3">
    <li data-nav-id="/hugo/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/hugo/"><h6>Hugo</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/hugo/init/" class="nav-item my-1">
                
                
                  <a href="/hugo/init/" class="nav-link p-0">
                    init
                  </a>
                
        </li>
        <li data-nav-id="/hugo/add-page/" class="nav-item my-1">
                
                
                  <a href="/hugo/add-page/" class="nav-link p-0">
                    add-page
                  </a>
                
        </li>
        <li data-nav-id="/hugo/edit-skill/" class="nav-item my-1">
                
                
                  <a href="/hugo/edit-skill/" class="nav-link p-0">
                    edit-skill
                  </a>
                
        </li>
        <li data-nav-id="/hugo/publish/" class="nav-item my-1">
                
                
                  <a href="/hugo/publish/" class="nav-link p-0">
                    publish
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/android/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/android/"><h6>Android</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/android/install/" class="nav-item my-1">
                
                
                  <a href="/android/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/android/create-project/" class="nav-item my-1">
                
                
                  <a href="/android/create-project/" class="nav-link p-0">
                    create project
                  </a>
                
        </li>
        <li data-nav-id="/android/import-material/" class="nav-item my-1">
                
                
                  <a href="/android/import-material/" class="nav-link p-0">
                    import material
                  </a>
                
        </li>
        <li data-nav-id="/android/start-page/" class="nav-item my-1">
                
                
                  <a href="/android/start-page/" class="nav-link p-0">
                    startpage
                  </a>
                
        </li>
        <li data-nav-id="/android/i18n/" class="nav-item my-1">
                
                
                  <a href="/android/i18n/" class="nav-link p-0">
                    i18n
                  </a>
                
        </li>
        <li data-nav-id="/android/nav-flat-page/" class="nav-item my-1">
                
                
                  <a href="/android/nav-flat-page/" class="nav-link p-0">
                    nav flat page
                  </a>
                
        </li>
        <li data-nav-id="/android/activity/" class="nav-item my-1">
                
                
                  <a href="/android/activity/" class="nav-link p-0">
                    Activity
                  </a>
                
        </li>
        <li data-nav-id="/android/db/" class="nav-item my-1">
                
                
                  <a href="/android/db/" class="nav-link p-0">
                    DB
                  </a>
                
        </li>
        <li data-nav-id="/android/dialog/" class="nav-item my-1">
                
                
                  <a href="/android/dialog/" class="nav-link p-0">
                    Dialog
                  </a>
                
        </li>
        <li data-nav-id="/android/fragment/" class="nav-item my-1">
                
                
                  <a href="/android/fragment/" class="nav-link p-0">
                    Fragment
                  </a>
                
        </li>
        <li data-nav-id="/android/jetpack/" class="nav-item my-1">
                
                
                  <a href="/android/jetpack/" class="nav-link p-0">
                    Jetpack
                  </a>
                
        </li>
        <li data-nav-id="/android/material/" class="nav-item my-1">
                
                
                  <a href="/android/material/" class="nav-link p-0">
                    Material
                  </a>
                
        </li>
        <li data-nav-id="/android/storage/" class="nav-item my-1">
                
                
                  <a href="/android/storage/" class="nav-link p-0">
                    Storage
                  </a>
                
        </li>
        <li data-nav-id="/android/%E5%9B%BE%E6%A0%87/" class="nav-item my-1">
                
                
                  <a href="/android/%E5%9B%BE%E6%A0%87/" class="nav-link p-0">
                    图标
                  </a>
                
        </li>
        <li data-nav-id="/android/store/" class="nav-item my-1">
                
                
                  <a href="/android/store/" class="nav-link p-0">
                    Store
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/blender/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/blender/"><h6>Blender</h6></a>
        
    </li>
    <li data-nav-id="/bootstrap/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/bootstrap/"><h6>BootStrap</h6></a>
        
    </li>
    <li data-nav-id="/centos7/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/centos7/"><h6>Centos7</h6></a>
        
    </li>
    <li data-nav-id="/dlna/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dlna/"><h6>DLNA</h6></a>
        
    </li>
    <li data-nav-id="/docker/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/docker/"><h6>Docker</h6></a>
        
    </li>
    <li data-nav-id="/dubbo/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/dubbo/"><h6>Dubbo</h6></a>
        
    </li>
    <li data-nav-id="/ffmpeg/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/ffmpeg/"><h6>FFmpeg</h6></a>
        
    </li>
    <li data-nav-id="/git/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/git/"><h6>Git</h6></a>
        
    </li>
    <li data-nav-id="/gitbook/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gitbook/"><h6>Gitbook</h6></a>
        
    </li>
    <li data-nav-id="/gitlab/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/gitlab/"><h6>Gitlab</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/gitlab/runner/" class="nav-item my-1">
                
                
                  <a href="/gitlab/runner/" class="nav-link p-0">
                    Runner
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/gradle/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/gradle/"><h6>Gradle</h6></a>
        
    </li>
    <li data-nav-id="/java/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/java/"><h6>Java</h6></a>
        
    </li>
    <li data-nav-id="/jenkins/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/jenkins/"><h6>Jenkins</h6></a>
        
    </li>
    <li data-nav-id="/kubernetes/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/kubernetes/"><h6>Kubernetes</h6></a>
        
    </li>
    <li data-nav-id="/mybatis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis/"><h6>Mybatis</h6></a>
        
    </li>
    <li data-nav-id="/mybatis-plus/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mybatis-plus/"><h6>Mybatis Plus</h6></a>
        
    </li>
    <li data-nav-id="/mysql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/mysql/"><h6>MySQL</h6></a>
        
    </li>
    <li data-nav-id="/nodejs/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/nodejs/"><h6>Node.js</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/nodejs/npm/" class="nav-item my-1">
                
                
                  <a href="/nodejs/npm/" class="nav-link p-0">
                    NPM
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/postgresql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/postgresql/"><h6>PostgreSQL</h6></a>
        
    </li>
    <li data-nav-id="/redis/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/redis/"><h6>Redis</h6></a>
        
    </li>
    <li data-nav-id="/samba/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/samba/"><h6>Samba</h6></a>
        
    </li>
    <li data-nav-id="/sql/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/sql/"><h6>SQL</h6></a>
        
    </li>
    <li data-nav-id="/ue5/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/ue5/"><h6>UE5</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/ue5/install/" class="nav-item my-1">
                
                
                  <a href="/ue5/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/ue5/uninstall/" class="nav-item my-1">
                
                
                  <a href="/ue5/uninstall/" class="nav-link p-0">
                    uninstall
                  </a>
                
        </li>
        <li data-nav-id="/ue5/qa/" class="nav-item my-1">
                
                
                  <a href="/ue5/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity/"><h6>Unity</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity/install/" class="nav-item my-1">
                
                
                  <a href="/unity/install/" class="nav-link p-0">
                    install
                  </a>
                
        </li>
        <li data-nav-id="/unity/scene/" class="nav-item my-1">
                
                
                  <a href="/unity/scene/" class="nav-link p-0">
                    scene
                  </a>
                
        </li>
        <li data-nav-id="/unity/inspector/" class="nav-item my-1">
                
                
                  <a href="/unity/inspector/" class="nav-link p-0">
                    inspector
                  </a>
                
        </li>
        <li data-nav-id="/unity/assets/" class="nav-item my-1">
                
                
                  <a href="/unity/assets/" class="nav-link p-0">
                    assets
                  </a>
                
        </li>
        <li data-nav-id="/unity/audio-source/" class="nav-item my-1">
                
                
                  <a href="/unity/audio-source/" class="nav-link p-0">
                    audio source
                  </a>
                
        </li>
        <li data-nav-id="/unity/camera/" class="nav-item my-1">
                
                
                  <a href="/unity/camera/" class="nav-link p-0">
                    camera
                  </a>
                
        </li>
        <li data-nav-id="/unity/script/" class="nav-item my-1">
                
                
                  <a href="/unity/script/" class="nav-link p-0">
                    script
                  </a>
                
        </li>
        <li data-nav-id="/unity/prefabs/" class="nav-item my-1">
                
                
                  <a href="/unity/prefabs/" class="nav-link p-0">
                    prefabs
                  </a>
                
        </li>
        <li data-nav-id="/unity/physics/" class="nav-item my-1">
                
                
                  <a href="/unity/physics/" class="nav-link p-0">
                    physics
                  </a>
                
        </li>
        <li data-nav-id="/unity/skybox/" class="nav-item my-1">
                
                
                  <a href="/unity/skybox/" class="nav-link p-0">
                    skybox
                  </a>
                
        </li>
        <li data-nav-id="/unity/particle-system/" class="nav-item my-1">
                
                
                  <a href="/unity/particle-system/" class="nav-link p-0">
                    particle system
                  </a>
                
        </li>
        <li data-nav-id="/unity/shortcut-keys/" class="nav-item my-1">
                
                
                  <a href="/unity/shortcut-keys/" class="nav-link p-0">
                    shortcut keys
                  </a>
                
        </li>
        <li data-nav-id="/unity/qa/" class="nav-item my-1">
                
                
                  <a href="/unity/qa/" class="nav-link p-0">
                    Q&amp;A
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-beginner/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-beginner/"><h6>Unity 2D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-beginner/init-and-move/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/init-and-move/" class="nav-link p-0">
                    Init &amp; Move
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/map/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/map/" class="nav-link p-0">
                    Map
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/data/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/data/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/animate/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/animate/" class="nav-link p-0">
                    Data
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/bullet/" class="nav-link p-0">
                    Bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/cinemachine/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/cinemachine/" class="nav-link p-0">
                    Cinemachine
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/particle/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/particle/" class="nav-link p-0">
                    Particle
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/npc/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/npc/" class="nav-link p-0">
                    NPC
                  </a>
                
        </li>
        <li data-nav-id="/unity-2d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-2d-game-kit/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-2d-game-kit/"><h6>Unity 2D Game Kit</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-2d-game-kit/record/" class="nav-item my-1">
                
                
                  <a href="/unity-2d-game-kit/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-3d-beginner/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-3d-beginner/"><h6>Unity 3D Beginner</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-3d-beginner/init/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/level/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/level/" class="nav-link p-0">
                    Level
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/nav/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/nav/" class="nav-link p-0">
                    Nav
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/render-pipeline/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/render-pipeline/" class="nav-link p-0">
                    Render Pipeline
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/postprocessing/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/postprocessing/" class="nav-link p-0">
                    PostProcessing
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/ui/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/ui/" class="nav-link p-0">
                    UI
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/enemy/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/enemy/" class="nav-link p-0">
                    Enemy
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/sound/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/sound/" class="nav-link p-0">
                    Sound
                  </a>
                
        </li>
        <li data-nav-id="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-item my-1">
                
                
                  <a href="/unity-3d-beginner/%E5%BB%BA%E6%A8%A1%E5%B7%A5%E5%85%B7/" class="nav-link p-0">
                    建模工具
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-arpg/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-arpg/"><h6>Unity ARPG</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-arpg/init/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/role-state-machine/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/role-state-machine/" class="nav-link p-0">
                    Role State Machine
                  </a>
                
        </li>
        <li data-nav-id="/unity-arpg/api-piece/" class="nav-item my-1">
                
                
                  <a href="/unity-arpg/api-piece/" class="nav-link p-0">
                    API Piece
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-animation/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-animation/"><h6>Unity Creativecore Animation</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-animation/door/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/door/" class="nav-link p-0">
                    Door
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-animation/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-animation/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-lighting/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-lighting/"><h6>Unity Creativecore Lighting</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-lighting/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-lighting/outdoor/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-lighting/outdoor/" class="nav-link p-0">
                    Outdoor
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creativecore-shader/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creativecore-shader/"><h6>Unity Creativecore Shader</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creativecore-shader/init/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/glass/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/glass/" class="nav-link p-0">
                    Glass
                  </a>
                
        </li>
        <li data-nav-id="/unity-creativecore-shader/shader-graph/" class="nav-item my-1">
                
                
                  <a href="/unity-creativecore-shader/shader-graph/" class="nav-link p-0">
                    Shader-Graph
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-beginner-code/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-beginner-code/"><h6>Unity Creator Kit Beginner Code</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-beginner-code/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-beginner-code/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-creator-kit-fps/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-creator-kit-fps/"><h6>Unity Creator Kit FPS</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-creator-kit-fps/record/" class="nav-item my-1">
                
                
                  <a href="/unity-creator-kit-fps/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-mythirdperson/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-mythirdperson/"><h6>Unity My Third Person</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-mythirdperson/init/" class="nav-item my-1">
                
                
                  <a href="/unity-mythirdperson/init/" class="nav-link p-0">
                    Init
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-playground/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-playground/"><h6>Unity Playground</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-playground/record/" class="nav-item my-1">
                
                
                  <a href="/unity-playground/record/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-ui/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-ui/"><h6>Unity UI</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-ui/init/" class="nav-item my-1">
                
                
                  <a href="/unity-ui/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/unity-vfx/" class="nav-item my-1 haschildren
        ">
        
        
          <a class="nav-link p-0" href="/unity-vfx/"><h6>Unity VFX</h6></a>
        
        <ul class="list-unstyled ml-2">
        <li data-nav-id="/unity-vfx/init/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/init/" class="nav-link p-0">
                    record
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/bullet/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/bullet/" class="nav-link p-0">
                    bullet
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rain/" class="nav-link p-0">
                    rain
                  </a>
                
        </li>
        <li data-nav-id="/unity-vfx/rock-rain/" class="nav-item my-1">
                
                
                  <a href="/unity-vfx/rock-rain/" class="nav-link p-0">
                    Rock Rain
                  </a>
                
        </li>
        </ul>
    </li>
    <li data-nav-id="/vue/" class="nav-item my-1 active
        ">
        
        
          <a class="nav-link p-0" href="/vue/"><h6>Vue</h6></a>
        
    </li>
    <li data-nav-id="/web/" class="nav-item my-1
        ">
        
        
          <a class="nav-link p-0" href="/web/"><h6>Web</h6></a>
        
    </li>
        </ul>
    </div>
</nav>


</div>
                <div class="docs-toc large order-lg-2 order-md-0 order-xs-1 col-12 col-lg-2 col-xl-2 position-sticky border-left"><div class="docs-toc">
	<nav id="TableOfContents"></nav>
</div>
</div>
                <div class="main col-12 order-1 col-md-9 col-lg-10 col-xl-8 py-3">
                

<div class="d-flex flex-column">
    <h1 class="js-title">Vue</h1>
    <div class="d-flex align-items-center">
        
    </div>
</div>

<hr>


<ol>
<li>v-if  v-show 区别</li>
</ol>
<p>v-show是控制display值，只简单的css切换</p>
<p>v-if是元素是否（条件）渲染，有一个局部编译/卸载的过程，切换这个过程会销毁和重建内部的事件监听</p>
<ol start="2">
<li>MVVM</li>
</ol>
<p>M模型 对应data数据</p>
<p>V视图，用户界面DOM</p>
<p>VM 视图模型 vue实例对象，连接view和model的桥梁</p>
<p>双向绑定，改任意一方会作用于另一方</p>
<ol start="3">
<li>v-for中key作用</li>
</ol>
<p>DOM元素的唯一标识，用于检查是否需要变动</p>
<p>提高虚拟DOM的更新</p>
<p>触发过度的动画效果</p>
<ol start="4">
<li>vue声明周期</li>
</ol>
<ul>
<li>beforeCreate  创建data之前</li>
<li>created       创建实例之后，完成了数据检测，创建data之后，修改数据不会触发updated，也不会更新视图</li>
<li>beforeMount   挂载dom前，完成了模板编译，创建了虚拟DOM，修改数据不会触发updated</li>
<li>mounted       挂载dom后，按编译的模板挂载到页面，可以发送异步请求，也可以访问dom</li>
<li>beforeUpdate  组件数据更新之前，数据是新的，页面上是旧的，组件即将更新，准备渲染，可以改变数据</li>
<li>updated       render重新做了渲染，数据和页面都是新的，不要在这里修改数据，会无限循环</li>
<li>beforeDestroy 销毁前</li>
<li>destroy       销毁后</li>
<li>activited   用keep-alive时，组件激活时候</li>
<li>deactivited    用keep-alive时，组件销毁时候</li>
</ul>
<ol start="5">
<li>created和mounted去请求数据有什么区别</li>
</ol>
<p>渲染DOM前后调用，后者可能闪屏</p>
<ol start="6">
<li>vue的修饰符</li>
</ol>
<ul>
<li>事件修饰符</li>
</ul>
<p>.stop 阻止冒泡</p>
<p>.prevent 阻止默认行为</p>
<p>.capture 内部元素触发的事件先在此处理</p>
<p>.self 只有在event.target当前元素时触发</p>
<p>.once 事件只会触发一次</p>
<p>.passvie 立即触发默认行为</p>
<p>.native 把当前元素作为原生标签看待</p>
<ul>
<li>按键修饰符</li>
</ul>
<p>.keyup  按键抬起</p>
<p>.keydown  按键按下</p>
<ul>
<li>系统</li>
</ul>
<p>.ctrl</p>
<p>.atl</p>
<p>.meta</p>
<ul>
<li>鼠标</li>
</ul>
<p>.left</p>
<p>.right</p>
<p>.middle</p>
<ul>
<li>表单</li>
</ul>
<p>.lazy 失去焦点才触发</p>
<p>.trim 删除前后空格</p>
<p>.number 限制输入数字或转为数字</p>
<ol start="7">
<li>element ui怎么表单验证</li>
</ol>
<p>在表单中加 rules 属性，然后在data里写校验规则，对应prop属性里面的值</p>
<p>内部添加规则</p>
<p>自定义数据校验</p>
<ol start="8">
<li>vue组件通信</li>
</ol>
<ul>
<li>父传子  props 单向、$refs 引用子组件的对象，可以访问内部的属性和方法</li>
<li>子传父  $emit（自定义事件，传参）</li>
<li>兄弟传 事件总线， new 一个新的vue实例，用on和emit对数据进行传递</li>
<li>vuex</li>
</ul>
<ol start="9">
<li>keep-alive是什么</li>
</ol>
<p>vue的内置组件，包裹组件的时候会缓存不活跃的组件实例，并不是销毁</p>
<p>把组件奇幻的状态保存在内存里，防止重复渲染DOM，减少时间和性能消耗</p>
<ol start="10">
<li>axios怎么封装</li>
</ol>
<p>用create方法，传递参数，配置baserul，请求超时时间，请求拦截器（添加token），响应拦截器（对异常统一处理，提示用户）
对接口的封装</p>
<ol start="11">
<li>vue路由怎么传参</li>
</ol>
<ul>
<li>params刷新会丢失</li>
<li>path</li>
<li>query</li>
</ul>
<ol start="12">
<li>
<p>hash和history区别</p>
</li>
<li>
<p>路由拦截怎么实现</p>
</li>
</ol>
<p>配置路由的时候添加一个属性，判断是否需要拦截</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75af00">meta</span><span style="color:#f92672">:</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">requirAuth</span><span style="color:#f92672">:</span> <span style="color:#00a8c8">true</span> <span style="color:#75715e">// 表示这个路由需要拦截
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">router</span><span style="color:#111">.</span><span style="color:#75af00">beforeEach</span><span style="color:#111">(</span><span style="color:#75af00">to</span><span style="color:#111">,</span> <span style="color:#75af00">form</span><span style="color:#111">,</span> <span style="color:#75af00">next</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">to</span><span style="color:#111">.</span><span style="color:#75af00">meta</span><span style="color:#111">.</span><span style="color:#75af00">requirAuth为true</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#75af00">进行判断</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#75af00">通过就</span> <span style="color:#75af00">next</span> <span style="color:#75af00">放行</span><span style="color:#960050;background-color:#1e0010">，</span><span style="color:#75af00">反之跳转到登录页面</span>
</span></span><span style="display:flex;"><span><span style="color:#111">})</span>
</span></span></code></pre></div><ol start="14">
<li>动态路由</li>
</ol>
<p>添加meta属性，扩展权限相关字段</p>
<p>根据用户登录账号，返回用户角色</p>
<p>前端根据角色，根据路由表中的meta.role进行匹配</p>
<p>把匹配到的路由形成可访问的路由</p>
<p>调用router的api添加路由</p>
<ol start="15">
<li>刷新后二次加载路由</li>
</ol>
<p>window.location.reload()</p>
<p>用matcher来对比</p>
<ol start="16">
<li>vuex刷新会丢失吗，怎么解决</li>
</ol>
<p>存进本地</p>
<p>监听刷新，刷新前将数据存到sessionstorage，刷新后，请求数据，请求到了用vuex，如果没有就用sessionstorage</p>
<ol start="17">
<li>computed和watch区别</li>
</ol>
<p>计算属性，会缓存结果，不支持异步</p>
<p>监听，不会缓存，支持异步</p>
<ol start="18">
<li>vuex场景使用</li>
</ol>
<ul>
<li>state  变量</li>
<li>getter 计算属性</li>
<li>mutations  提交更新数据的方法</li>
<li>actions    异步提交</li>
<li>modules    按业务分类</li>
</ul>
<p>个人用户信息、购物车、订单模块</p>
<ol start="19">
<li>双向绑定原理</li>
</ol>
<p>数据劫持和发布订阅，</p>
<p>利用Object.defineProperty、Proxy来劫持属性的setter和getter，在数据发生改变的时候，发布消息给订阅者，触发对应的回调渲染视图</p>
<p>一、需要observer的数据对象进行递归办理，包括子属性，都加上setter和getter</p>
<p>二、complie模板解析指令，把模板中的变量替换成数据，然后初始化渲染视图，把每个指令对应的节点绑定上更新函数，添加订阅者，如果数据变化，收到通知，更新视图</p>
<p>三、watcher订阅者是observer和compile中间的通信桥梁，在自身实例化时，往订阅器内添加自己，自己有个update方法，等待属性变动时，条用自身的update方法，触发complie回调</p>
<p>四、mvvm作为数据绑定的入口，整合了observer、complie和watcher三者，通过observer来监听自己的数据变化，通过complie解析模板指令，最用利用watcher把observer和complie联系起来</p>
<ol start="20">
<li>diff算法和虚拟dom</li>
</ol>
<p>虚拟dom是描述元素和元素之间的关系，是一个js对象，如果组件内有响应的数据，数据发生改变的时候，render函数会生成一个新的虚拟dom，会和旧进行比对，找到需要修改地方，然后去对应的修改真实dom</p>
<p>diff算法返回patch对象，这个对象的作用是存储新旧前后不同的地方，最后用patch里的信息去更新真实DOM</p>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75af00">createEle</span><span style="color:#111">(</span><span style="color:#75af00">vnode</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">const</span> <span style="color:#75af00">tag</span> <span style="color:#f92672">=</span> <span style="color:#75af00">vnode</span><span style="color:#111">.</span><span style="color:#75af00">tag</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">const</span> <span style="color:#75af00">attrs</span> <span style="color:#f92672">=</span> <span style="color:#75af00">vnode</span><span style="color:#111">.</span><span style="color:#75af00">attrs</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">const</span> <span style="color:#75af00">children</span> <span style="color:#f92672">=</span> <span style="color:#75af00">vnode</span><span style="color:#111">.</span><span style="color:#75af00">children</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">let</span> <span style="color:#75af00">ele</span> <span style="color:#f92672">=</span> <span style="color:#75af00">createElement</span><span style="color:#111">(</span><span style="color:#75af00">tag</span><span style="color:#111">)</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">for</span> <span style="color:#111">(</span><span style="color:#00a8c8">let</span> <span style="color:#75af00">attr</span> <span style="color:#00a8c8">of</span> <span style="color:#75af00">attrs</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">ele</span><span style="color:#111">.</span><span style="color:#75af00">setAttr</span><span style="color:#111">(</span><span style="color:#75af00">attr</span><span style="color:#111">,</span> <span style="color:#75af00">attrs</span><span style="color:#111">[</span><span style="color:#75af00">attr</span><span style="color:#111">])</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  <span style="color:#75af00">children</span> <span style="color:#f92672">=</span> <span style="color:#75af00">forEach</span><span style="color:#111">(</span><span style="color:#75af00">child</span> <span style="color:#111">=&gt;</span> <span style="color:#75af00">ele</span><span style="color:#111">.</span><span style="color:#75af00">append</span><span style="color:#111">(</span><span style="color:#75af00">createEle</span><span style="color:#111">(</span><span style="color:#75af00">child</span><span style="color:#111">)))</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">return</span> <span style="color:#75af00">ele</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">updateChildren</span><span style="color:#111">(</span><span style="color:#75af00">old</span><span style="color:#111">,</span> <span style="color:#00a8c8">new</span><span style="color:#111">)</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">const</span> <span style="color:#75af00">oC</span> <span style="color:#f92672">=</span> <span style="color:#75af00">old</span><span style="color:#111">.</span><span style="color:#75af00">children</span> <span style="color:#f92672">||</span> <span style="color:#111">[]</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">const</span> <span style="color:#75af00">nC</span> <span style="color:#f92672">=</span> <span style="color:#00a8c8">new</span><span style="color:#111">.</span><span style="color:#75af00">children</span> <span style="color:#f92672">||</span> <span style="color:#111">[]</span>
</span></span><span style="display:flex;"><span><span style="color:#75af00">oC</span><span style="color:#111">.</span><span style="color:#75af00">forEach</span><span style="color:#111">(</span><span style="color:#75af00">occ</span> <span style="color:#111">,</span> <span style="color:#75af00">index</span> <span style="color:#111">=&gt;</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>  <span style="color:#00a8c8">if</span> <span style="color:#111">(</span><span style="color:#75af00">occ</span><span style="color:#111">.</span><span style="color:#75af00">tag</span> <span style="color:#f92672">===</span> <span style="color:#75af00">nC</span><span style="color:#111">[</span><span style="color:#75af00">index</span><span style="color:#111">].</span><span style="color:#75af00">tag</span><span style="color:#111">){</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">updateChildren</span><span style="color:#111">(</span><span style="color:#75af00">occ</span><span style="color:#111">,</span> <span style="color:#75af00">nC</span><span style="color:#111">[</span><span style="color:#75af00">index</span><span style="color:#111">])</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span> <span style="color:#75af00">eles</span> <span style="color:#111">{</span>
</span></span><span style="display:flex;"><span>    <span style="color:#75af00">repaceNode</span><span style="color:#111">(</span><span style="color:#75af00">occ</span><span style="color:#111">,</span> <span style="color:#75af00">nC</span><span style="color:#111">[</span><span style="color:#75af00">index</span><span style="color:#111">])</span>
</span></span><span style="display:flex;"><span>  <span style="color:#111">}</span>
</span></span><span style="display:flex;"><span><span style="color:#111">})</span>
</span></span><span style="display:flex;"><span><span style="color:#111">}</span>
</span></span></code></pre></div><ol start="21">
<li>vuex响应式处理</li>
</ol>
<p>通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的修改state值，通过getter把数据更新到视图</p>
<ol start="22">
<li>封装组件</li>
</ol>
<p>vue.extend创建组件</p>
<p>vue.components注册组件</p>
<p>容器组件管理数据，展示组件管理视图</p>
<ol start="23">
<li>可复用的组件</li>
</ol>
<p>低耦合，组件之间依赖越少越好</p>
<p>最好从父级传入信息，不要在公共组件中请求数据</p>
<p>传入的数据要校验</p>
<p>处理事件在父组件上</p>
<ol start="24">
<li>vue如何强制刷新</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#272822;background-color:#fafafa;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75af00">location</span><span style="color:#111">.</span><span style="color:#75af00">reload</span><span style="color:#111">()</span>
</span></span><span style="display:flex;"><span><span style="color:#00a8c8">this</span><span style="color:#111">.</span><span style="color:#75af00">$router</span><span style="color:#111">.</span><span style="color:#75af00">go</span><span style="color:#111">(</span><span style="color:#ae81ff">0</span><span style="color:#111">)</span>
</span></span></code></pre></div><ol start="25">
<li>vue2 vue3区别</li>
</ol>
<p>双向绑定方法不同 Object.defineProperty 和 Proxy 都是监听属性的变化</p>
<p>vue2只能有一个根节点，vue3可以多个</p>
<p>vue2有$set方法但是vue3没有，比如动态给一个对象添加属性，vue2就需要用到$set，而vue3可以直接添加</p>
<p>vue2选项式，vue3多一个组合式（setup）</p>
<p>v-if v-for优先级不一样2 for&gt;if 3if&gt;for</p>
<p>mixins全局添加属性或方法，vue3也支持，但不推荐使用了，只是为了兼容老代码</p>
<p>getCurrentInstance()能获取到整个vue3的app对象，全局的的可以是在appContext.app.config.globalPropertites中维护（设置的通过install方法给这个对象添加属性）</p>
<p>生命周期不同</p>
<ol start="26">
<li>teleport</li>
</ol>
<p>teleport可以将dom生成到指定dom的子集里，而不是该组件的子集，用来做对话框用的</p>
<ol start="27">
<li>vue性能优化</li>
</ol>
<ul>
<li>不要把所有数据都放data中</li>
<li>v-for给每个元素绑定事件用事件代理，key保证唯一</li>
<li>keep-alive缓存组件</li>
<li>尽可能拆分组件，提高复用性、维护性</li>
<li>合理使用懒加载、异步组件</li>
<li>数据持久化尽量使用防抖、节流</li>
<li>按需加载依赖</li>
<li>懒加载页面</li>
<li>图片懒加载</li>
<li>骨架屏</li>
<li>预渲染</li>
<li>服务端渲染ssr</li>
<li>CDN加载第三方模块</li>
<li>多线程打包</li>
<li>抽离公共文件</li>
<li>客户端缓存、服务端缓存</li>
<li>服务端gzip压缩</li>
</ul>
<ol start="28">
<li>首屏优化</li>
</ol>
<ul>
<li>使用路由懒加载</li>
<li>非首屏组件使用异步组件</li>
<li>首屏不重要的组件延迟加载</li>
<li>静态资源放在CDN上</li>
<li>服务端渲染</li>
<li>减少DOM树的数量和层级</li>
<li>图片懒加载（滚动到的时候再加载，先存在到data-src中</li>
</ul>
<ol start="29">
<li>vue3性能为什么比vue2好</li>
</ol>
<p>diff算法的优化，vue2是全量比较</p>
<p>静态提升，没有响应式的部分，就直接沿用</p>
<p>事件监听缓存，复用监听的处理方法</p>
<ol start="30">
<li>vue3为什么用proxy</li>
</ol>
<p>proxy可以代理整个对象，Object.definePropety只代理对象上的某个属性（会递归）</p>
<p>监听的方法更丰富，比如新添加属性，所以vue3没有$set方法</p>
<p>会生成新对象，不会改变原对象，而后者会直接改变原对象</p>
<ol start="31">
<li>seo如何优化</li>
</ol>
<p>nuxt.js服务端渲染（ssr</p>
<p>预渲染 prerender-spa-plugin</p>
<ol start="32">
<li>webpack模块</li>
</ol>
<ul>
<li>entry</li>
<li>output</li>
<li>loader</li>
<li>plugin</li>
<li>modules</li>
</ul>


    


                    
                    <div class="row"></div> 

                </div>

            </div> 

        </div> 
<script src="/lib/jquery.min.js"></script> 
<script src="/lib/popper.min.js"></script> 

<script src="/js/bootstrap.min.js"></script> 


<script type="text/javascript" src="/plugins/lunr.min.js"></script>
<script type="text/javascript" src="/plugins/auto-complete.js"></script>
<link href="/plugins/auto-complete.css" rel="stylesheet">
<script type="text/javascript">
  
      var baseurl = "\/";
  
</script>
<script type="text/javascript" src="/plugins/search.js"></script>

<script type="text/javascript" src="/plugins/favorites.js"></script>


<script type="text/javascript" src="/plugins/clipboard.js"></script>
<script>
  new ClipboardJS('.btn');
</script>
</body>
</html>
